// 合同列表组件(左边合同右边列表的左边)
<template>
  <div class="cContractList">
    <div class="cTitle">合同基本信息</div>
    <div class="search">
      <el-input :placeholder="placeholder" v-model="searchKeywords" clearable @clear="handleClear" @change="handleSearch">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <div v-if="selectShow">
      <div class="seleect" v-for="item in selectOp" :key="item.label">
        <span>{{item.label}}：</span>
        <el-select v-model="item.value" @change="((val)=>{selectChange(val, item.name)})" :placeholder="'请选择' + item.label" style="width: 60%;">
          <el-option v-for=" (e,i) in item.option" :label="e.label" :value="  e.value" :key="i"></el-option>
        </el-select>
      </div>
    </div>
    <div class="scrollWrap" v-scrollBar>
      <slot />
    </div>
    <pager
      layout="total,prev, pager, next"
      :pageInfo="pageInfo"
      :hideSelectTips="true"
      @changeCurrentPage="changeCurrentPage"
      @changePageSize="changePageSize"
    />
  </div>
</template>

<script>
import pager from '@/components/dataList/components/pager'
export default {
  name: 'contractList',
  components: {
    pager,
  },
  inject: ['updateList'],
  props: {
    // 搜索框提示语
    placeholder: {
      type: String,
      default: '请输入内容',
    },
    // 搜索关键词对应的键名
    searchName: {
      type: String,
      default: 'keywords',
    },
    //下拉列表所需数组
    //  {
    //   label: '核查状态',//下拉框对应的label
    //   value: '',//下拉框选中值（可传设置）
    //   name:'',
    //   option: [
    //     { label: '全部', value: '' },
    //     { label: '本次所有', value: '01' },
    //     { label: '未核算', value: '02' },
    //     { label: '已核算', value: '03' },
    //   ]
    // }
    selectOp: {
      type: Array,
      default: () => [],
    },
    selectShow: {
      type: Boolean,
      default: false,
    },
    // 分页数据
    pageInfo: {
      type: Object,
      default: () => ({
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10, // 每页显示多少条
      }),
    },
  },
  data () {
    return {
      // 搜索关键词
      searchKeywords: '',
    }
  },
  methods: {
    // 修改当前页
    changeCurrentPage (current) {
      this.updateList({ current })
    },
    // 修改单页条数
    changePageSize (size) {
      this.updateList({ current: 1, size })
    },
    // 下拉选择值
    selectChange (val, name) {
      this.updateList({
        [this.searchName]: this.searchKeywords,
        [name]: val,
        current: 1,
      })
    },
    // 删除搜索关键词
    handleClear () {
      this.updateList({ [this.searchName]: '', current: 1 })
    },
    // 关键词搜索
    handleSearch (val) {
      this.updateList({ [this.searchName]: val, current: 1 })
    },
  },
}
</script>

<style lang="scss" >
.cContractList {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .cTitle {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid rgba(97, 106, 120, 0.07);
  }
  .search {
    padding: 0 20px;
    height: 50px;
    display: flex;
    align-items: center;
    .el-input {
      width: 250px;
    }
  }
  .seleect {
    padding: 0 20px;
    height: 50px;
    display: flex;
    align-items: center;
    .el-select {
      width: 60%;
    }
  }
  .scrollWrap {
    flex: 1;
    padding: 10px 0px;
  }
  /deep/ .pager-box {
    border-top: 1px solid rgba(97, 106, 120, 0.07);
    height: 50px;
    margin-bottom: 0;
    padding: 0 20px;
    justify-content: flex-end;
  }
}
</style>
